.media-wrapper{
    .upload-media-btn{
        position: fixed;
        top: 136px;
        right: 40px;
        text-align: right;
        z-index: 999;
        width: 124px;
        height: 96px;
    
        .menu-upload{
            background: #FFFFFF;
            box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.16);
            border-radius: 4px;
            padding: 4px;
            list-style: none;
        
            >li{
                clear: both;
                margin: 0;
                padding: 5px 12px;
                color: rgba(0, 0, 0, 0.88);
                font-weight: normal;
                font-size: 14px;
                line-height: 1.5714285714285714;
                cursor: pointer;
                transition: all 0.2s;
                text-align: left;

                .upload-select :deep() p{margin: 0;}
    
                &:hover{background-color: rgba(0, 0, 0, 0.04);}
    
                :deep() .ant-btn{
                    text-align: left;
                    border: 0;
                    padding: 0;
                    background-color: initial;
                    color: rgba(0, 0, 0, 0.88);
                    display: block;
                    width: 100%;
                }
    
                :deep() .ant-upload-wrapper,
                :deep() .ant-upload{
                    display: block;
                    width: 100%;
                }
            }
        }
    }

    .media-uplad-page{
        width: 800px;
        height: 482px;
        border-radius: 4px;
        overflow: hidden;
        background-color: #fff;
        position: fixed;
        right: 136px;
        top: 50px;
        z-index: 999;
        display: flex;
        justify-content: flex-start;

        .media-upload-menu{
            width: 170px;
            border-right: 1px solid #E9ECF0;

            .media-upload-title{
                background-color: #F6F8FC;
                font-size: 16px;
                font-weight: 700;
                color: #303133;
                padding: 12px 81px 14px 24px;
            }

            .media-upload-menu-content{
                padding: 20px 10px 20px 8px;

                .media-upload-label{
                    padding: 12px 25px;
                    color: #2D51A0;
                    font-size: 14px;
                    font-weight: 700;
                    background-color: #F6F9FF;
                    border-radius: 4px;
                    cursor: pointer;
                }
            }
        }

        .media-upload-content{
            position: relative;

            .media-upload-switch{
                padding: 16px 0;
                text-align: center;
                background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
                color: #6F7885;
                font-size: 14px;
                font-weight: 400;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 99;
                cursor: pointer;
            }

            .media-upload-body{
                height: 434px;
                width: 624px;
                overflow-y: scroll;

                >ul{
                    list-style: none;
                    margin-left: -40px;

                    .media-upload-item{
                        padding: 0 20px;

                        >a{
                            display: flex;
                            justify-content: flex-start;
                            border-bottom: 1px solid #E9ECF0;
                            padding: 12px 0;
                            text-decoration: none;
                        }

                        &.active{background-color: #F2F3F5;}

                        .media-upload-item-img{
                            width: 50px;
                            height: 50px;
                            border-radius: 4px;
                            overflow: hidden;

                            >img{
                                width: 50px;
                                height: 50px;
                            }
                        }

                        .media-upload-item-info{
                            margin: 0 10px;

                            >p{
                                font-size: 14px;
                                font-weight: 700;
                                color: #1F2329;
                                margin: 0;
                            }

                            .media-progress{
                                width: 450px;
                                height: 4px;
                                border-radius: 8px;
                                overflow: hidden;
                                margin: 6px 0 2px;
                                background-color: #E9ECF0;

                                .media-progress-bar{
                                    background-color: #2D51A0;
                                    height: 4px;
                                    width: 100px;
                                }
                            }

                            .media-speed-wrapper{
                                display: flex;
                                justify-content: space-between;
                                font-size: 14px;
                                font-weight: 400;
                                color: #6F7885;

                                .media-speed{color: #2D51A0;}
                            }

                            &.transform{
                                >p{color: #6F7885;}
                                .media-speed-wrapper{
                                    color: #6F7885;
                                    justify-content: flex-start;

                                    >i{
                                        display: inline-block;
                                        width: 20px;
                                        height: 20px;
                                        background-image: url('../../assets/img/mediaUpload/media-loading.png');
                                        background-size: 100%;
                                        margin-right: 4px;
                                    }   
                                }
                            }
                        }

                        .media-upload-item-option{
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            width: 60px;

                            >span{
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                background-size: 100%;
                                cursor: pointer;

                                &.media-pause{background-image: url('../../assets/img/mediaUpload/media-pause.png');}
                                &.media-pause:hover{background-image: url('../../assets/img/mediaUpload/media-pause-a.png');}
                                &.media-resume{background-image: url('../../assets/img/mediaUpload/media-resume.png');}
                                &.media-resume:hover{background-image: url('../../assets/img/mediaUpload/media-resume-a.png');}
                                &.media-delete{background-image: url('../../assets/img/mediaUpload/media-delete.png');}
                                &.media-wait{background-image: url('../../assets/img/mediaUpload/media-wait.png');}
                                &.media-folders{background-image: url('../../assets/img/mediaUpload/media-folder.png');}
                                &.media-folders.active,
                                &.media-folders:hover{background-image: url('../../assets/img/mediaUpload/media-folder-a.png');}
                                &.media-folders.transform{background-image: url('../../assets/img/mediaUpload/media-folder-d.png');}
                                &.media-delete.active,
                                &.media-delete:hover{background-image: url('../../assets/img/mediaUpload/media-delete-a.png');}
                                :deep() .ant-upload{
                                    display: block!important;
                                    width: 20px;
                                    height: 20px;
                                }
                            }
                        }
                    }
                }
            }

            .media-upload-header{
                padding: 12px 20px;
                background-color: #F6F8FC;
                display: flex;
                justify-content: space-between;

                .media-upload-label{
                    font-size: 16px;
                    font-weight: 700;
                    color: #303133;

                    >span{color: #2D51A0;}
                }

                .media-upload-delete-all{
                    font-size: 14px;
                    font-weight: 500;
                    color: #2D51A0;
                    cursor: pointer;

                    >i{
                        display: inline-block;
                        width: 14px;
                        height: 14px;
                        background-image: url("../../assets/img/mediaUpload/media-delete-all.png");
                        background-size: 100%;
                        vertical-align: middle;
                        margin-right: 3px;
                    }
                }
            }
        }
    }
}